<template>
	<view :style="{ 'padding-top': statusBarHeight + 'px' }">
		
		<view class="bg_FFFFFF padding-tb-xs">
			<swiper :autoplay="true" :interval="3000" :duration="1000" style="height: 168upx;">
				<swiper-item>
					<view class="flex">
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">上证指数</view>
							<view class="text-red text-bold text-xl margin-tb-xs":class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{shangZheng.P}}</view>
							<view class="text-red text-sm">
								<text :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{(shangZheng.P-shangZheng.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{((shangZheng.P-shangZheng.YC) *10/shangZheng.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">创业板指</view>
							<view class="text-red text-bold text-xl margin-tb-xs" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{chuangYe.P}}</view>
							<view class="text-red text-sm">
								<text :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{(chuangYe.P-chuangYe.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{((chuangYe.P-chuangYe.YC) *10/chuangYe.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">深证成指</view>
							<view class="text-red text-bold text-xl margin-tb-xs" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{shenZheng.P}}</view>
							<view class="text-red text-sm">
								<text :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{(shenZheng.P-shenZheng.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{((shenZheng.P-shenZheng.YC) *10/shenZheng.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
						
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="margin-top-sm bg_FFFFFF">
			<view class="flex justify-between align-center padding border-bottom-1B202C">
				<view class="flex-sub color_99A2B5 text-df">股票</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="flex-sub color_99A2B5 text-df">最新价</view>
				</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="flex-twice color_99A2B5 text-df text-right">涨跌幅</view>
					<view class="flex-sub color_99A2B5 text-df text-right">操作</view>
				</view>
			</view>
			
			<view class="flex justify-between align-center padding-lr padding-tb-sm border-bottom-1B202C" :key='index' v-for="(item,index) in data">
				<view class="flex-sub"  @tap="toInfo(item.data)">
					<view class="text-lg text-black">{{item.sname}}</view>
					<view class="text-xs color_6B728A margin-top-xs">{{item.scode}}</view>
				</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="text-black text-bold text-xl flex-sub c37A037" v-if="item.data.P<item.data.YC">{{item.data.P.toFixed(2)}}</view>
					<view class="text-black text-bold text-xl flex-sub cE02C3A" v-if="item.data.P>=item.data.YC">{{item.data.P.toFixed(2)}}</view>
				</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="text-bold text-xl flex-twice text-right c37A037" v-if="item.data.P<item.data.YC">{{item.data.ZF}}%</view>
					<view class="text-bold text-xl flex-twice text-right cE02C3A" v-if="item.data.P>=item.data.YC">{{item.data.ZF}}%</view>
					<view class="flex-sub text-right" @click="del(item)">
						<image src="/static/images/icon/del.png" mode="widthFix" style="width: 30rpx;"></image>
					</view>
				</view>
			</view>
			
			<view class="flex justify-center align-center padding-tb-sm" @click="search">
				<image src="/static/images/icon/addgp.png" mode="widthFix" style="width: 40rpx;"></image>
				<view class="text-df color_A6AFC3 margin-left-sm">添加股票</view>
			</view>
		</view>
		
		<!-- 新版本 end -->
	
		<view>
			<u-toast ref="uToast" />
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
				where: "",
				data: [],
				shangZheng: {},
				chuangYe: {},
				shenZheng: {},
				indexButton: '-1', //初始状态不显示
			};
		},
		methods:{
			// 跳转页面
			tonavigateTo(url){
				uni.navigateTo({
					url:url
				})
			},
			del: function(item) {
				this.$Request.post(this.$api.index.del, {
					id: item.id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					this.optional();
				})
			},
			toInfo: function(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
				})
			},
			getIndexShares: function() {
				this.$Request.get(this.$api.index.getIndexShares).then(res => {
					this.shares = res.data;
					this.shangZheng = this.shares[0];
					this.chuangYe = this.shares[1];
					this.shenZheng = this.shares[2];
			
				})
			},
			optional() {
				this.$Request.get(this.$api.index.optional).then(res => {
					if(res.data.length>0){
						if(res.data[0].uid){
							this.data = res.data;
						}
					}else{
						this.data = {}
					}
				})
			},
			search(e) {
				uni.navigateTo({
					url: "/pages/public/search/search?where=" + this.where,
				})
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					}else if(res.code == 0){
						this.$Request.get(this.$api.index.userInfo).then(res => {
							if(res.data.ischeck == 1){
								uni.showModal({
									content: "实名认证，机构正在审核中",
									confirmText: "确定",
									cancelText: "取消"
								})
							}else if(res.data.ischeck == 0){
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "温馨提示：根据反洗钱规定，您需要完成实名认证才可以继续操作。",
									confirmText: "去认证",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
										  uni.navigateTo({
										  	url: "/pages/member/realname?flag="+ischeck,
										  })
										} else if (res.cancel) {
										 
										}
									}
								})
							}else if(res.data.ischeck == 3){
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "实名认证未通过审核，请重新提交",
									confirmText: "确定",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
										  uni.navigateTo({
										  	url: "/pages/member/realname?flag="+ischeck,
										  })
										} else if (res.cancel) {
										 
										}
									}
								})
							}
						})
					}
				})
			}
		},
		created() {
			this.optional();
			this.checkLogin();
			this.getIndexShares()
			this.where = '';
		}
	}
</script>
<style lang="scss" scoped>
	@import "./optional.scss";
	.border-bottom-1B202C{
		border-color: #EDEDED;
	}
	.all{
		min-height: 92.5vh !important;
	}
	.gainsProgressBox {
		margin: 10rpx 10rpx 0 10rpx;
	}
	
	.gainsProgress {
		height: 5rpx;
	}
	
	.gainsProgressCenter {
		margin: 0 4px;
	}
	
	.cE02C3A{
		color: #E02C3A;
	}
	
	.c37A037{
		color: #37A037;
	}
</style>
